<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new-project</title>
    <link rel="stylesheet" href="zino-config.css">
</head>
<body>
<div class="top-bar">
    <h1 id="project_name">current project: None</h1>
    <input type="text" id="currentDir">
</div>
<div class="main-content">
    <div class="cargoTomlBlock">
        <div id="currentCargoTomlDescription" class="cargoTomlDescription">current Cargo.toml:</div>
        <div class="textarea-container">
            <div class="lineNumber"></div>
            <textarea id="currentCargoTomlTextArea" class="cargoTomlTextArea" readonly></textarea>
        </div>
    </div>


    <div id="config-form-block">
        <div class="config-form" id="zino-config-form">
            <div class="form-description">zino config</div>
            <form class="config-details">
                <div class="closet">
                    <div class="option-title">Framework</div>
                    <div class="option-group exclusive">
                        <div class="unchecked" data-feature="axum">Axum</div>
                        <div class="unchecked" data-feature="actix">Actix</div>
                        <div class="unchecked" data-feature="dioxus">dioxus</div>
                        <div class="unchecked" data-feature="ntex">Ntex</div>
                    </div>
                </div>

                <div class="closet">
                    <div class="option-title">zino-features</div>
                    <div class="option-group non-exclusive">
                        <div class="unchecked" data-feature="i18n">i18n</div>
                        <div class="unchecked" data-feature="jwt">jwt</div>
                        <div class="unchecked" data-feature="oidc">oidc</div>
                        <div class="unchecked" data-feature="opa">opa</div>
                        <div class="unchecked" data-feature="orm">orm</div>
                        <div class="unchecked all-options">all</div>
                    </div>
                </div>

            </form>
        </div>


        <div class="config-form" id="core-config-form">
            <div class="form-description">Core config</div>
            <form class="config-details">
                <div class="closet hidden" id="orm-form">
                    <div class="option-title" >Database</div>

                    <div class="option-group exclusive">
                        <div class="unchecked" data-feature="orm-mysql">MySQL</div>
                        <div class="unchecked" data-feature="orm-postgresql">PostgreSQL</div>
                        <div class="unchecked" data-feature="orm-sqlite">SQLite</div>
                        <div class="unchecked" data-feature="orm-mariadb">MariaDB</div>
                        <div class="unchecked" data-feature="orm-tidb">TiDB</div>
                    </div>
                </div>


                <div class="closet">
                    <div class="option-title">Accessor</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="accessor">default</div>
                        <div class="unchecked" data-feature="accessor-azblobs">azblob</div>
                        <div class="unchecked" data-feature="accessor-azdls">azdls</div>
                        <div class="unchecked" data-feature="accessor-cacache">cacache</div>
                        <div class="unchecked" data-feature="accessor-cos">cos</div>
                        <div class="unchecked" data-feature="accessor-dashmap">dashmap</div>
                        <div class="unchecked" data-feature="accessor-dropbox">dropbox</div>
                        <div class="unchecked" data-feature="accessor-fs">fs</div>
                        <div class="unchecked" data-feature="accessor-gcs">gcs</div>
                        <div class="unchecked" data-feature="accessor-gdrive">gdrive</div>
                        <div class="unchecked" data-feature="accessor-ghac">ghac</div>
                        <div class="unchecked" data-feature="accessor-http">http</div>
                        <div class="unchecked" data-feature="accessor-ipfs">ipfs</div>
                        <div class="unchecked" data-feature="accessor-ipmfs">ipmfs</div>
                        <div class="unchecked" data-feature="accessor-memcached">memcached</div>
                        <div class="unchecked" data-feature="accessor-memory">memory</div>
                        <div class="unchecked" data-feature="accessor-mini-moka">mini-moka</div>
                        <div class="unchecked" data-feature="accessor-moka">moka</div>
                        <div class="unchecked" data-feature="accessor-mysql">mysql</div>
                        <div class="unchecked" data-feature="accessor-obs">obs</div>
                        <div class="unchecked" data-feature="accessor-onedrive">onedrive</div>
                        <div class="unchecked" data-feature="accessor-oss">oss</div>
                        <div class="unchecked" data-feature="accessor-persy">persy</div>
                        <div class="unchecked" data-feature="accessor-postgresql">postgresql</div>
                        <div class="unchecked" data-feature="accessor-redb">redb</div>
                        <div class="unchecked" data-feature="accessor-redis">redis</div>
                        <div class="unchecked" data-feature="accessor-s3">s3</div>
                        <div class="unchecked" data-feature="accessor-sled">sled</div>
                        <div class="unchecked" data-feature="accessor-supabase">supabase</div>
                        <div class="unchecked" data-feature="accessor-webdav">webdav</div>
                        <div class="unchecked" data-feature="accessor-webhdfs">webhdfs</div>
                        <div class="unchecked all-options" data-feature="all-accessors">all</div>
                    </div>
                </div>

                <div class="closet">
                    <div class="option-title">Connector</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="connector-arrow">arrow</div>
                        <div class="unchecked" data-feature="connector-http">http</div>
                        <div class="unchecked" data-feature="connector-mysql">mysql</div>
                        <div class="unchecked" data-feature="connector-postgres">postgres</div>
                        <div class="unchecked" data-feature="connector-sqlite">Sqlite</div>
                        <div class="unchecked all-options" data-feature="all-connectors">all</div>
                    </div>
                </div>


                <div class="closet">
                    <div class="option-title">locale</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="locale">locale</div>
                        <div class="unchecked" data-feature="locale-en">locale-en</div>
                        <div class="unchecked" data-feature="locale-es">locale-es</div>
                        <div class="unchecked" data-feature="locale-de">locale-de</div>
                        <div class="unchecked" data-feature="locale-fr">locale-fr</div>
                        <div class="unchecked" data-feature="locale-zh">locale-zh</div>
                        <div class="unchecked all-options" data-feature="all-locales">all</div>
                    </div>
                </div>

                <div class="closet">
                    <div class="option-title">validator</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="validator">validator</div>
                        <div class="unchecked" data-feature="validator-credit-card">validator-credit-card</div>
                        <div class="unchecked" data-feature="validator-email">validator-email</div>
                        <div class="unchecked" data-feature="validator-phone-number">validator-phone-number</div>
                        <div class="unchecked" data-feature="validator-regex">validator-regex</div>
                        <div class="unchecked all-options" data-feature="all-validators">all</div>
                    </div>
                </div>

                <div class="closet">
                    <div class="option-title">view</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="view">view</div>
                        <div class="unchecked" data-feature="view-minijinja">view-minijinja</div>
                        <div class="unchecked" data-feature="view-tera">view-tera</div>
                        <div class="unchecked all-options">all</div>
                    </div>
                </div>

                <div class="closet">
                    <div class="option-title">core-features</div>

                    <div class="option-group">
                        <div class="unchecked" data-feature="cookie">cookie</div>
                        <div class="unchecked" data-feature="crypto-sm">crypto-sm</div>
                        <div class="unchecked" data-feature="dotenv">dotenv</div>
                        <div class="unchecked" data-feature="env-filter">env-filter</div>
                        <div class="unchecked" data-feature="flume">flume</div>
                        <div class="unchecked" data-feature="metrics">metrics</div>
                        <div class="unchecked" data-feature="openapi">openapi</div>
                        <div class="unchecked" data-feature="sentry">sentry</div>
                        <div class="unchecked" data-feature="tls-native">tls-native</div>
                        <div class="unchecked" data-feature="tls-rustls">tls-rustls</div>
                        <div class="unchecked" data-feature="tracing-log">tracing-log</div>
                        <div class="unchecked" data-feature="http02">http02</div>
                        <div class="unchecked all-options">all</div>
                    </div>
                </div>

            </form>
        </div>

        <button id="save-config">save config</button>
    </div>


    <div class="cargoTomlBlock">
        <div id="aimCargoTomlDescription" class="cargoTomlDescription">update your Cargo.toml to:</div>
        <div class="textarea-container">
            <div class="lineNumber"></div>
            <textarea id="aimCargoTomlTextArea" class="cargoTomlTextArea"></textarea>
        </div>
    </div>
</div>
</body>
<script src="zino-config.js"></script>

</html>